<template>
    <div style="margin: 48px auto; width: 50vw;">
        <button id="button" aria-describedby="tooltip" @click="open">I'm a button</button>
        <button id="button" aria-describedby="tooltip" @click="open">I'm a button</button>
        <button id="button" aria-describedby="tooltip" @click="open"
                title="11111111111111111111111111111111111111111111111">I'm a button
        </button>
    </div>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import useVideo from "@/view/media/use-video";
import {createPopper} from '@popperjs/core';
import {computePosition, flip, shift, offset, arrow, autoUpdate} from '@floating-ui/dom';

const dom = ref(undefined);

const divRef = ref();

const div = document.createElement('div');
div.classList.add('box');
// div.classList.add('hidden');
div.classList.add('box-primary');
div.classList.add('sea-popper');


document.body.append(div);

const open = (evt: Event) => {
    div.innerText = evt.target.innerText;
    const popperInstance = createPopper(evt.target, div, {
        placement: 'bottom-start',
        modifiers: [{name: 'offset', options: {offset: [0, 8]}}]
    });
}

onMounted(() => {
})

</script>

<style lang="scss" scoped>
</style>